<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        :formColumns="FORM_ITEMS"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        showPagination
        showActionCol
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="450"
        :rowHeight="41"
        :actionRender="renderTableBtnAction"
        :actionColWidth="100"
        :selection-change="selectionChange"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      />
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm'
import BasicTable from '@/components/skusTable'
import skusPage from '@/mixins/commodity/skusPage'
import { FORM_ITEMS, TABLE_COLUMNS } from './constants'
import { getTableAction } from '@/utils/getBtnsRender'
import { handleOpenNewPage } from '@/utils/bizUtils'
import { getOAInfoService } from '@/api/sourcing/public'
import {
  queryConfigAuditListService,
  deleteRecordService,
  cancelRecordService
} from '@/api/sourcing/purchaseType'

export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    BasicTable,
  },
  data () {
    return {
      FORM_ITEMS,
      formData: {
        status: '',
        submitName: '',
        submitDeptName: '',
        recordNo: '',
        categoryName: '',
        brandName: '',
      },
      pageSizes: [10, 100, 1000],
      loadingFn: (state) => { this.tableInfo.loading = state }
    }
  },
  mounted () {
    this.tableInfo.columns = TABLE_COLUMNS
    this.getTableData()
  },
  methods: {
    // 渲染表格操作栏按钮 0-待提交，1-待审批，2-审批驳回，3-撤回，4-审批通过
    renderTableBtnAction (h, { row }) {
      const actions = [
        { label: '查看', method: this.handleView, status: [1, 4] },
        { label: '编辑', method: this.handleEdit, hasAuth: true, status: [0, 2, 3] },
        { label: '删除', method: () => { this.handleCofirm(row, '删除') }, hasAuth: true, status: [0, 2, 3] },
        { label: '审批流', method: this.handleAudit, hasAuth: true, status: [1, 2, 4] },
        { label: '取回', method: () => { this.handleCofirm(row, '取回') }, hasAuth: true, status: [1] },
      ]
      const actionList = actions.filter(item => item.status.includes(row.status))
      return getTableAction({ h, row, actionList, showBtn: this.showBtn })
    },
    // 获取表格数据
    async getTableData () {
      const res = await queryConfigAuditListService(
        { ...this.formData, ...this.pagination },
        this.loadingFn
      );
      if (res?.data) {
        const { list, totalSize } = res.data
        this.tableInfo.list = list
        this.total = totalSize
      }
    },
    // 查看
    handleView (row) {
      handleOpenNewPage(this, {
        name: 'viewPurchaseTypeConfig',
        query: {
          auditRecordId: row.auditRecordId
        }
      });
    },
    // 编辑
    handleEdit (row) {
      this.$router.push({ name: 'editPurchaseTypeConfig', query: { auditRecordId: row.auditRecordId } })
    },
    // 审批流
    async handleAudit (row) {
      if (!row.flowSysId) {
        return this.$message.warning('无审批ID')
      }
      const res = await getOAInfoService({ flowId: row.flowSysId }, this.loadingFn)
      if (res?.data) {
        window.open(res.data)
      }
    },
    // 删除
    async handleDelete (row) {
      const res = await deleteRecordService({ auditRecordId: row.auditRecordId }, this.loadingFn)
      if (res) {
        this.$message.success('删除成功')
        this.getTableData()
      }
    },
    // 取回
    async handleCancel (row) {
      const res = await cancelRecordService({ auditRecordId: row.auditRecordId }, this.loadingFn)
      if (res) {
        this.$message.success('取回成功')
        this.getTableData()
      }
    },
    // 确认框
    handleCofirm (row, msg) {
      this.$confirm(`您确定要${msg}该单据吗？`, '提示', {
        type: 'warning',
      }).then(() => {
        if (msg == '取回') {
          this.handleCancel(row)
        } else if (msg == '删除') {
          this.handleDelete(row)
        }
      }).catch(() => {});
    },
  }
}
</script>
